<template>
  <main class="container" v-if="isLogin">
    <main class="content">
      <!-- 商品模块 -->
      <div class="goods_list" v-if="list.length>0">
        <van-swipe-cell class="goods_item" v-for="item in list" :key="item.id">
          <van-checkbox class="selected" v-model="item.checked"></van-checkbox>
          <div class="goods_box">
            <van-card
            class="goods_card"
              :num="item.count"
              :price="(item.goods_info.price/100*item.count).toFixed(2)"
              :desc="item.goods_info.brand"
              :title="item.goods_info.name"
              :thumb="item.goods_info.pic_url"
            >
              <template #tags>
                <van-tag plain type="primary">{{item.goods_info.tags  }}</van-tag>
               
              </template>
              <template #footer>
                <van-stepper v-model="item.count" @change="countChange(item)" />
              </template>
            </van-card>
          </div>

          <template #right>
            <van-button square class="delete-button" type="danger" @click="deleteCart(item.id)"
              >删除</van-button
            >
          </template>
        </van-swipe-cell>
      </div>
      <div v-else>
        <van-empty description="购物车为空" />
         <van-button round type="primary" class="bottom-button" @click="router.replace('/home')">去首页</van-button>
      </div>
    </main>

    <!-- 底部 提交订单 -->
    <van-submit-bar class="submit" :price="countPrice" button-text="提交订单" v-if="list.length>0" @submit="onSubmit">
      <van-checkbox :checked="isAllChecked" @click="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </main>
  <div v-else class="container">
    <van-empty description="请先登录">
      <van-button @click="router.replace('/login')" round type="primary" style="width:200px">去登录</van-button>
    </van-empty>
  </div>
</template>
<script setup>
import {computed,ref} from 'vue'
import userCartInfo from '@/stores/userCartInfo'
import {storeToRefs}  from 'pinia'
import {cartDelete,cartEdit} from '@/api/cart'
 import {showConfirmDialog,showSuccessToast} from 'vant'
 import {getToken} from '@/utils/cookie'
import {useRoute,useRouter} from 'vue-router'

let router = useRouter()
 let isLogin =ref(!!getToken())
let store = userCartInfo()
let {list} = storeToRefs(store)
let countChange = async (item)=>{
  console.log(list);
  await cartEdit({id:item.id,goods_id:item.goods_id,count:item.count})
}
let deleteCart = (id)=>{
 showConfirmDialog({
    title: "确认删除",
    message: "是否确认删除 该商品",
  })
    .then(async () => {
      //   确定 执行删除逻辑
     
      await cartDelete({ ids: [id] });
      // 重新获取 最新的 购物车数据
      store.getCartInfo();
      showSuccessToast("删除成功");
    })
    .catch(() => {
      // on cancel
    }); 
}
let checkedAll=()=>{
  
  let flag = !isAllChecked.value
 
  list.value.forEach(item=>{
    
        item.checked=flag
  })
}
let isAllChecked=computed(()=>{
  
  const flag = list.value.every((item)=>item.checked==true)
  return flag
})
// 计算总价格
let countPrice=computed(()=>{
    let num=0
    // 过滤出选中的商品
   list.value.forEach(item=>{
    if(item.checked){
      num+=item.count*item.goods_info.price
    }
   })
    // 
return num
})
let onSubmit=()=>{
  // 判断 是否选中商品
  let checkedList=list.value.filter((item)=>item.checked)

  let ids = checkedList.map(item=>item.id)
  console.log(ids);
  if(checkedList.length){
    // 跳转至地址选择
    router.push(`/address-list?isCart=1&checkedGoods=${ids}`)
  }else{
    showSuccessToast("请先选择商品");
  }
}
</script>



<style scoped lang="scss">
.delete-button {
  height: 100%;
}

.container {
  .login_btn {
    width: 280px;
  }
  main.content {
    margin-bottom: var(--van-submit-bar-height);
    .goods_list {
      .goods_item {
        position: relative;
        .selected {
          position: absolute;
          z-index: 2;
          left: 8px;
          top: 58px;
        }
        .goods_box {
          background: #f7f8fa;
          margin-top: 10px;
          .goods_card {
            margin-left: 30px;
          }
        }
        .delete-button {
          width: 100%;
          height: 100%;
        }
      }
    }
    .is_null {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 55vh;
      text-align: center;
      p.cart_tip {
        font-size: 18px;
      }
      .to_btn {
        margin-top: 16px;
        width: 180px;
      }
    }
  }
  .submit {
    bottom: var(--van-submit-bar-height);
  }
}
</style>